<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=dataset-link
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom,'dark');
var app = {};

var option;



setTimeout(function () {

    option = {
	title: {
            text: "不同湿度下租赁人数的变化趋势",
            padding: 10,
            textStyle: {
                fontSize:20
            }
        },
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: [
                ['湿度', '0.0',
'0.08',
'0.1',
'0.12',
'0.13',
'0.14',
'0.15',
'0.16',
'0.17',
'0.18',
'0.19',
'0.2',
'0.21',
'0.22',
'0.23',
'0.24',
'0.25',
'0.26',
'0.27',
'0.28',
'0.29',
'0.3',
'0.31',
'0.32',
'0.33',
'0.34',
'0.35',
'0.36',
'0.37',
'0.38',
'0.39',
'0.4',
'0.41',
'0.42',
'0.43',
'0.44',
'0.45',
'0.46',
'0.47',
'0.48',
'0.49',
'0.5',
'0.51',
'0.52',
'0.53',
'0.54',
'0.55',
'0.56',
'0.57',
'0.58',
'0.59',
'0.6',
'0.61',
'0.62',
'0.63',
'0.64',
'0.65',
'0.66',
'0.67',
'0.68',
'0.69',
'0.7',
'0.71',
'0.72',
'0.73',
'0.74',
'0.75',
'0.76',
'0.77',
'0.78',
'0.79',
'0.8',
'0.81',
'0.82',
'0.83',
'0.84',
'0.85',
'0.86',
'0.87',
'0.88',
'0.89',
'0.9',
'0.91',
'0.92',
'0.93',
'0.94',
'0.96',
'0.97',
'1.0'],
                ['普通用户',92,
32,
38,
12,
6,
20,
232,
1296,
1438,
1692,
3636,
2504,
2754,
4268,
6290,
8214,
6364,
8200,
11246,
10576,
14406,
18462,
16282,
11536,
21236,
18192,
21776,
29422,
31242,
22850,
27898,
24998,
32726,
26366,
30012,
21776,
27484,
33152,
19010,
24272,
26742,
18964,
23678,
27314,
20844,
24894,
38634,
16888,
15800,
26772,
17654,
12828,
21842,
30328,
10288,
14854,
24342,
31642,
8260,
10660,
20142,
26210,
7216,
10658,
20426,
27126,
3418,
7092,
14296,
19366,
14522,
850,
6326,
9438,
27440,
5380,
164,
368,
8382,
19786,
8276,
262,
14,
18,
2816,
11504,
16,
36,
3250],
                ['注册用户', 1154,
122,
176,
46,
28,
56,
352,
3536,
5370,
4910,
5154,
11028,
10818,
13776,
21756,
29200,
24280,
36728,
38866,
40190,
47936,
49522,
54026,
45366,
66132,
64458,
70764,
81554,
96382,
82698,
91972,
91050,
109120,
91760,
115952,
75508,
96416,
125354,
77682,
92246,
116812,
91646,
97604,
105316,
96298,
103956,
133778,
82510,
82328,
100578,
79232,
79740,
108284,
121922,
45780,
68972,
111466,
122198,
44956,
54362,
98618,
117912,
49754,
54026,
101142,
109850,
35850,
46804,
94496,
91104,
62342,
14630,
53028,
68112,
159090,
25550,
1662,
8884,
75748,
131422,
52078,
1990,
224,
286,
41128,
93698,
734,
92,
33888],
                ['总人数', 1246,
154,
214,
58,
34,
76,
584,
4832,
6808,
6602,
8790,
13532,
13572,
18044,
28046,
37414,
30644,
44928,
50112,
50766,
62342,
67984,
70308,
56902,
87368,
82650,
92540,
110976,
127624,
105548,
119870,
116048,
141846,
118126,
145964,
97284,
123900,
158506,
96692,
116518,
143554,
110610,
121282,
132630,
117142,
128850,
172412,
99398,
98128,
127350,
96886,
92568,
130126,
152250,
56068,
83826,
135808,
153840,
53216,
65022,
118760,
144122,
56970,
64684,
121568,
136976,
39268,
53896,
108792,
110470,
76864,
15480,
59354,
77550,
186530,
30930,
1826,
9252,
84130,
151208,
60354,
2252,
238,
304,
43944,
105202,
750,
128,
37138]
               
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            
            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                emphasis: {focus: 'data'},
                label: {
                    formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                    itemName: '湿度',
                    value: '2012',
                    tooltip: '2012'
                }
            }
        ]
    };

    myChart.on('updateAxisPointer', function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });

    myChart.setOption(option);

});

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>
    